//获取json文件中的内容
$.getJSON('../public/port/ControllerPort.json', function (data) {
    $(function () {
        //vue
        let app = new Vue({
            el: "#forgetThePasswordController",
            data: {
                //用户名提示信息
                UsernameMessage: "用户名长度为4～18个字符、只能以字母开头、数字、点、减号或下划线组成",
                //密码提示信息
                PasswordMessage: "密码长度为4～10个字符、由任意字符组成",
                //名字提示信息
                NameMessage: "名字长度为2～15个汉字",
                //电话
                PhoneMessage: "注册之后的手机号长度为11位",
                PhoneCodeMessage: "验证码为6位,五分钟内有效",
                //用户输入的账户名
                Username: "",
                //用户输入的密码
                Password: "",
                //名字
                Name: "",
                //手机号
                Phone: "",
                PhoneCode: "",
                //账户名框内提示文字
                UsernamePlaceholder: "username",
                //密码框内提示文字
                PasswordPlaceholder: "password",
                //名字框提示文字
                NamePlaceholder: "name",
                //手机号提示文字
                PhonePlaceholder: "phone",
                //账户名外框style风格
                UsernameStyle: {},
                //密码外框style风格
                PasswordStyle: {},
                //名字外框style风格
                NameStyle: {},
                //手机号外框style风格
                PhoneStyle: {},
                PhoneCodeStyle: {},
                PhoneCodePlaceholder: "phoneCode",
                //*号颜色
                UsernameTipsStyle: {},
                PasswordTipsStyle: {},
                NameTipsStyle: {},
                PhoneTipsStyle: {},
                PhoneCodeTipsStyle: {},
                //视图切换
                Template1: true,
                Template2: false,
                Template3: false,
                State1: true,
                State2: false,
                Message: true,
                Second: 0,
                //模块切换style风格
                ActiveAStyle: {},
                ActiveAIStyle: {},
                PersonalAStyle: {},
                PersonalAIStyle: {},
                ConfirmAStyle: {},
                ConfirmAIStyle: {},
                ClickSate: false,
                ErrorState: '',
                ErrorStyle: {},
                //用户id
                UserId: {},
                EyeState: true,
                ButtonState: true,
                PhoneCodeSend: 0,
                PhoneCodeButtonState: true
            },
            methods: {
                nx1: function () {
                    //用户名正则表达式验证
                    var patten = /^[a-zA-Z]\w{3,15}$/ig;
                    if (app.Username === "") {
                        app.UsernamePlaceholder = "请输入用户名";
                        app.UsernameStyle.border = "1px solid #a94442";
                        app.UsernameTipsStyle.color = "red";
                    } else if (!patten.test(app.Username)) {
                        app.Username = "";
                        app.UsernamePlaceholder = "用户名格式不合法";
                        app.UsernameStyle.border = "1px solid #a94442";
                        app.UsernameTipsStyle.color = "red";
                    } else {
                        app.UsernamePlaceholder = "Username";
                        app.UsernameStyle.border = null;
                        app.UsernameTipsStyle.color = "black";
                    }
                    //密码正则表达式验证
                    var patten2 = /^\S{4,10}$/;
                    if (app.Password === "") {
                        app.PasswordPlaceholder = "请输入密码";
                        app.PasswordStyle.border = "1px solid #a94442";
                        app.PasswordTipsStyle.color = "red";
                    } else if (!patten2.test(app.Password)) {
                        app.Password = "";
                        app.PasswordPlaceholder = "密码格式不合法";
                        app.PasswordStyle.border = "1px solid #a94442";
                        app.PasswordTipsStyle.color = "red";
                    } else {
                        app.PasswordPlaceholder = "Password";
                        app.PasswordStyle.border = null;
                        app.PasswordTipsStyle.color = "black";
                    }
                    if (app.UsernamePlaceholder === "Username" && app.PasswordPlaceholder === "Password") {
                        //获取请求url路径
                        let url = data.Url + ':' + data.Port + '/' + data.ProjectName + '/' + data.ForgetPasswordController + '/verifyUser';
                        $.ajax({
                            url: url,
                            data: {
                                username: app.Username
                            },
                            type: "post",
                            dataType: "json",
                            success: function (data) {
                                console.log(data)
                                if (data.message === "The user name was not found") {
                                    app.Username = "";
                                    app.UsernamePlaceholder = "找不到用户名";
                                    app.UsernameStyle.border = "1px solid #a94442";
                                    app.UsernameTipsStyle.color = "red";
                                    app.view(1);
                                    //设置可点击状态
                                    app.ClickSate = true;
                                    app.ErrorState = "";
                                } else {
                                    //设置可点击状态
                                    app.ClickSate = false;
                                    app.ErrorState = "";
                                    app.UserId = data.data
                                    app.view(2);
                                }
                            },
                            error: function () {
                                app.ErrorState = "连接超时";
                                app.ErrorStyle.color = "#f15773";
                                //设置可点击状态
                                app.ClickSate = true;
                            }
                        });
                    }
                },
                nx2: function () {
                    //验证姓名
                    let patten3 = /^[\u4e00-\u9fa5]{2,15}$/;
                    if (app.Name === "") {
                        app.NamePlaceholder = "请输入名字";
                        app.NameStyle.border = "1px solid #a94442";
                        app.NameTipsStyle.color = "red";
                    } else if (!patten3.test(app.Name)) {
                        app.Name = "";
                        app.NamePlaceholder = "名字格式不合法"
                        app.NameStyle.border = "1px solid #a94442";
                        app.NameTipsStyle.color = "red";
                    } else {
                        app.NamePlaceholder = "Name";
                        app.NameStyle.border = null;
                        app.NameTipsStyle.color = "black";
                    }
                    //验证电话
                    let patten4 = /^[1][3,4,5,7,8][0-9]{9}$/;
                    if (app.Phone === "") {
                        app.PhonePlaceholder = "请输入电话";
                        app.PhoneStyle.border = "1px solid #a94442";
                        app.PhoneTipsStyle.color = "red";
                    } else if (!patten4.test(app.Phone)) {
                        app.Phone = "";
                        app.PhonePlaceholder = "电话格式不合法";
                        app.PhoneStyle.border = "1px solid #a94442";
                        app.PhoneTipsStyle.color = "red";
                    } else {
                        app.PhonePlaceholder = "Phone";
                        app.PhoneStyle.border = null;
                        app.PhoneTipsStyle.color = "black";
                    }
                    if (app.PhoneCode === "") {
                        app.PhoneCodePlaceholder = "请输入验证码";
                        app.PhoneCodeStyle.border = "1px solid #a94442";
                        app.PhoneCodeTipsStyle.color = "red";
                    } else {
                        app.PhoneCodePlaceholder = "PhoneCode";
                        app.PhoneCodeStyle.border = null;
                        app.PhoneCodeTipsStyle.color = "black";
                    }
                    //验证账户名与密码
                    if (app.NamePlaceholder === "Name" & app.PhonePlaceholder === "Phone" && app.PhoneCodePlaceholder === "PhoneCode") {
                        this.view(3);
                        //获取请求url路径
                        let url = data.Url + ':' + data.Port + '/' + data.ProjectName + '/' + data.ForgetPasswordController + '/verifyUser';
                        let phoneCodeUrl = data.Url + ':' + data.Port + '/' + data.ProjectName + '/' + data.ForgetPasswordController + '/phoneCodeVerification';

                        $.ajax({
                            url: phoneCodeUrl,
                            data: {
                                id: app.UserId,
                                phone: app.Phone,
                                phoneCode: app.PhoneCode
                            },
                            type: "post",
                            dataType: "json",
                            success: function (data) {
                                console.log("第一个", data);
                                if (data.message === "The verification code is correct") {
                                    app.PhoneCodePlaceholder = "PhoneCode";
                                    app.PhoneCodeStyle.border = null;
                                    app.PhoneCodeTipsStyle.color = "black";
                                    //设置可点击状态
                                    //设置可点击状态
                                    app.ClickSate = false;
                                    app.ErrorState = "";
                                    app.Message = false;
                                    $.ajax({
                                        url: url,
                                        data: {
                                            id: app.UserId,
                                            username: app.Username,
                                            password: app.Password,
                                            name: app.Name,
                                            phone: app.Phone,
                                            phoneCode: app.PhoneCode
                                        },
                                        type: "post",
                                        dataType: "json",
                                        success: function (data) {
                                            console.log("第二个", data);
                                            if (data.message === "The name is incorrect") {
                                                app.Name = "";
                                                app.NamePlaceholder = "名字错误";
                                                app.NameStyle.border = "1px solid #a94442";
                                                app.NameTipsStyle.color = "red";
                                                setTimeout(function () {
                                                    app.view(2);
                                                }, 2000)
                                                //设置可点击状态
                                                app.ClickSate = false;
                                                app.ErrorState = "";
                                                app.Message = false;
                                            } else if (data.message === "Modification completed") {
                                                //设置可点击状态
                                                app.ClickSate = true;
                                                app.ErrorState = "";
                                                app.Message = true;
                                                app.view(3);
                                                app.countDown();
                                            }
                                        },
                                        error: function () {
                                            app.ErrorState = "连接超时";
                                            app.ErrorStyle.color = "#f15773";
                                            //设置可点击状态
                                            app.ClickSate = true;
                                        }
                                    });
                                }
                                if (data.message === "Mobile phone verification code error") {
                                    app.PhoneCode = "";
                                    app.PhoneCodePlaceholder = "验证码错误";
                                    app.PhoneCodeStyle.border = "1px solid #a94442";
                                    app.PhoneCodeTipsStyle.color = "red";
                                    setTimeout(function () {
                                        app.view(2);
                                    }, 2000)
                                    //设置可点击状态
                                    app.ClickSate = false;
                                    app.ErrorState = "";
                                    app.Message = false;
                                }
                            }
                        });
                    }
                },
                view: function (t) {
                    if (t === 2) {
                        app.Template1 = false
                        app.Template2 = true
                        app.Template3 = false
                        //设置按钮样式
                        app.PersonalAStyle.background = "#4f6272";
                        app.PersonalAStyle.color = "#ffffff";
                        app.PersonalAIStyle.background = "#ffffff";
                        app.PersonalAIStyle.color = "#4f6272";
                        app.ActiveAStyle.background = "rgba(241, 87, 115, 1)";
                        app.ActiveAIStyle.color = "rgb(241, 87, 115)";
                        app.ConfirmAStyle.background = "#e3e9ef";
                        app.ConfirmAStyle.color = "#4F6272";
                        app.ConfirmAIStyle.background = "#4F6272";
                        app.ConfirmAIStyle.color = "#ffffff";
                    } else if (t === 3) {
                        app.Template1 = false
                        app.Template2 = false
                        app.Template3 = true
                        //设置样式
                        app.PersonalAStyle.background = "rgb(241, 87, 115)";
                        app.PersonalAStyle.color = "#ffffff";
                        app.PersonalAIStyle.background = "#ffffff";
                        app.PersonalAIStyle.color = "#f15773";
                        app.ConfirmAStyle.background = "rgb(241, 87, 115)";
                        app.ConfirmAStyle.color = "#ffffff";
                        app.ConfirmAIStyle.background = "#ffffff";
                        app.ConfirmAIStyle.color = "#f15773";
                    } else if (t === 1) {
                        app.Template1 = true
                        app.Template2 = false
                        app.Template3 = false
                        //设置按钮样式
                        app.ActiveAStyle.background = "#4f6272";
                        app.ActiveAStyle.color = "#ffffff";
                        app.ActiveAIStyle.background = "#ffffff";
                        app.ActiveAIStyle.color = "#4f6272";
                        app.PersonalAStyle.background = "#e3e9ef";
                        app.PersonalAStyle.color = "#4F6272";
                        app.PersonalAIStyle.background = "#4F6272";
                        app.PersonalAIStyle.color = "#ffffff";
                    }
                },
                countDown() {
                    let times;
                    if ((app.UsernamePlaceholder === "Username") & (app.PasswordPlaceholder === "Password") & (app.NamePlaceholder === "Name") & (app.PhonePlaceholder === "Phone") & (app.PhoneCodePlaceholder === "PhoneCode")) {
                        this.Second = 5;
                        times = setInterval(() => {
                            if (this.Second > 0) {
                                this.Second--;
                                console.log(this.Second)
                            } else if (this.Second === 0) {
                                if (app.Message === true) {
                                    clearTimeout(times);
                                    //设置跳转页
                                    $("head").append('<meta http-equiv="refresh" content="0;url=sign-in.html"/>');
                                }
                            }
                        }, 1000);
                    }
                    if (app.PhoneCodePlaceholder === "请输入验证码" || app.PhoneCodePlaceholder === "验证码错误") {
                        console.log("运行")
                        clearTimeout(times);
                    }
                },
                PhoneCodeCountDown() {
                    app.PhoneCodeButtonState = true;
                    if (app.PhonePlaceholder === "Phone") {
                        let nextCode = $("#nextCode");
                        nextCode.attr("disabled", "disabled");
                        this.PhoneCodeSend = 30;
                        let time = setInterval(() => {
                            if (this.PhoneCodeSend > 0) {
                                this.PhoneCodeSend--;
                                console.log(this.PhoneCodeSend)
                            } else if (this.PhoneCodeSend === 0) {
                                app.PhoneCodeButtonState = false;
                                nextCode.removeAttr("disabled");
                                clearTimeout(time);
                            }
                        }, 1000);
                    }
                },
                eye() {
                    let input = $("#password");
                    if (input.prop("type") === "password") {
                        input.prop("type", "text");
                        $("#eye").prop("class", "fa fa-eye fa-2x");
                        app.EyeState = false;
                    } else {
                        input.prop("type", "password");
                        $("#eye").prop("class", "fa fa-eye-slash fa-2x");
                        app.EyeState = true;
                    }
                },
                SendVerificationCode(state) {
                    let forgetPasswordUrl = data.Url + ':' + data.Port + '/' + data.ProjectName + '/' + data.ForgetPasswordController + '/verifyUser';
                    //验证电话
                    let patten4 = /^[1][3,4,5,7,8][0-9]{9}$/;
                    if (app.Phone === "") {
                        app.PhonePlaceholder = "请输入电话";
                        app.PhoneStyle.border = "1px solid #a94442";
                        app.PhoneTipsStyle.color = "red";
                        return;
                    } else if (!patten4.test(app.Phone)) {
                        app.Phone = "";
                        app.PhonePlaceholder = "电话格式不合法";
                        app.PhoneStyle.border = "1px solid #a94442";
                        app.PhoneTipsStyle.color = "red";
                        return;
                    } else {
                        app.PhonePlaceholder = "Phone";
                        app.PhoneStyle.border = null;
                        app.PhoneTipsStyle.color = "black";
                    }
                    if (state === true) {
                        $.ajax({
                            url: forgetPasswordUrl,
                            data: {
                                id: app.UserId,
                                username: app.Username,
                                phone: app.Phone,
                                state: state
                            },
                            type: "post",
                            dataType: "json",
                            success: function (data) {
                                console.log(data)
                                if (data.message === "Incorrect mobile phone number") {
                                    app.Phone = "";
                                    app.PhonePlaceholder = "手机号错误";
                                    app.PhoneStyle.border = "1px solid #a94442";
                                    app.PhoneTipsStyle.color = "red";
                                    setTimeout(function () {
                                        app.view(2);
                                    }, 2000)
                                    //设置可点击状态
                                    app.ClickSate = false;
                                    app.ErrorState = "";
                                    app.Message = false;
                                } else {
                                    app.ButtonState = false;
                                    app.State1 = false;
                                    app.State2 = true;
                                    app.PhoneCodeCountDown();
                                }
                            }
                        });
                    }
                    if (state === false) {
                        let phoneCodeUrl = data.Url + ':' + data.Port + '/' + data.ProjectName + '/' + data.ForgetPasswordController + '/phoneCode';
                        $.ajax({
                            url: phoneCodeUrl,
                            data: {
                                id: app.UserId,
                                phone: app.Phone,
                                phoneCode: app.PhoneCode,
                                state: true
                            },
                            type: "post",
                            dataType: "json",
                            success: function (data) {
                                console.log(data)
                                if (data.message === "Refresh") {
                                    //设置可点击状态
                                    app.ClickSate = true;
                                    app.ErrorState = "";
                                    app.Message = true;
                                    app.PhoneCodeCountDown()
                                }
                            }
                        });
                    }
                }
            }
        });
    });
})